<template>
  <div class="echarts-pie">
    <echarts-core :option="chartsOption" class="echarts-elem" v-bind="$attrs" />
    <div class="echarts-icon" :style="iconStyle">
      <slot name="icon" />
    </div>
  </div>
</template>

<script>
import EchartsCore from './EchartsCore.vue';
import { getEchartsPieOptions } from './echartsOptions.js';
export default {
  name: 'echarts-pie',
  components: { EchartsCore },
  props: {
    dataList: { type: Array, default: () => [] }, //数据
    format: { type: Function, default: undefined }, //设置legend
    color: { type: Array, default: () => ['#4572FF', '#19A086', '#EEA61C', '#E64C1C'] },
    options: { type: Object, default: () => ({ title: {}, legend: {}, grid: {}, series: {}, tooltip: {} }) },
  },
  computed: {
    iconStyle() {
      return {
        position: 'absolute',
        transform: 'translate(-50%, -50%)',
        top: this.chartsOption.series[0].center[1],
        left: this.chartsOption.series[0].center[0],
      };
    },
    chartsOption() {
      return getEchartsPieOptions(this.dataList, this.options);
    },
  },
};
</script>

<style lang="less">
.echarts-pie {
  position: relative;
  width: 100%;
  height: 100%;
  .echarts-elem {
    width: 100%;
    height: 100%;
  }
  .echarts-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
